<template>
  <el-form :model="form" :rules="rules" ref="form" :label-width="lang==='zh' ?'110px':'210px'" label-position="left" style="margin:0 20px;">
    <el-form-item :label="$t('目的IPv6网络地址')" prop="ipv6-address" @input="updateView($event)">
      <el-input v-emoji v-model="form['ipv6-address']" autocomplete="off" ref="ipv6Address" :style="lang==='zh'? 'width:200px':'width:260px'" size='small'></el-input>
    </el-form-item>
    <el-form-item :label="$t('前缀长度')" prop="prefix-len" @input="updateView($event)">
      <el-input v-emoji v-model.number="form['prefix-len']" ref="prefixLen" autocomplete="off" :style="lang==='zh'? 'width:200px':'width:260px'" size='small'></el-input>
    </el-form-item>

    <el-form-item :label="$t('出接口')" prop="interface">
      <el-select v-model="form.interface" :placeholder="$t('请选择')" ref="ipv6interface" :style="lang==='zh'? 'width:200px':'width:260px'" size='small' clearable filterable allow-create default-first-option>
        <el-option v-for="item in options" :disabled="item.enPortMode === 3" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item :label="$t('下一跳')" @input="updateView($event)">
      <el-input v-emoji v-model="form.nexthop" ref="ipv6nexthop" autocomplete="off" :style="lang==='zh'? 'width:200px':'width:260px'" size='small'></el-input>
    </el-form-item>
    <span style="color: red">{{$t('提示:手动配置的静态路由优先级高于直连路由优先级!')}}</span>
  </el-form>

</template>

<script>
import { getPhysicalApiArray } from '@/api/network/api/physical'
import { inputClass, selectClass } from '@/utils/input-class.js'
export default {
  inject: ['reload'],
  props: [
    'dialogFormVisible',
    'type_info',
    'edit_form'
  ],
  name: 'Ipv4Edit',
  data () {
    // var add_ipv4 = (rule, value, callback) => {
    //   if (!String(value).trim()) {
    //     return callback(new Error(this.$t('IP不能为空')))
    //   }
    //   if (!this.isValidIP(value)) {
    //     callback(new Error(this.$t('请输入正确的ip地址')))
    //   } else {
    //     callback()
    //   }
    // }
    // var mask = (rule, value, callback) => {
    //   if (!String(value).trim()) {
    //     return callback(new Error(this.$t('子网掩码不能为空')))
    //   }
    //   if (!this.isValidMask(value)) {
    //     callback(new Error(this.$t('请输入正确的子网掩码')))
    //   } else {
    //     callback()
    //   }
    // }
    var add_ipv6 = (rule, value, callback) => {
      if (!String(value).trim()) {
        return callback(new Error(this.$t('IP不能为空')))
      }
      if (!this.isValidIPv6(value)) {
        callback(new Error(this.$t('请输入正确的ip地址')))
      } else {
        callback()
      }
    }
    var vaildateInterface = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('请选择出接口')))
      } else {
        callback()
      }
    }
    var add_ex_len = (rule, value, callback) => {
      console.log(!String(value).trim())
      if (!String(value).trim()) {
        return callback(new Error(this.$t('前缀长度不能为空')))
      } else {
        callback()
      }
    }
    return {
      lang: this.$i18n.locale,
      form: {
        'ipv6-address': '',
        'prefix-len': '',
        interface: '',
        nexthop: ''
      },
      rules: {
        'ipv6-address': [
          { required: false, validator: add_ipv6, trigger: 'blur' }
        ],
        'prefix-len': [
          { required: false, validator: add_ex_len, trigger: 'blur' },
          { type: 'number', message: this.$t('前缀长度必须为数字值') }
        ],
        interface: [
          { required: false, validator: vaildateInterface, trigger: 'change' }
        ]
      },
      options: []
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        if (this.type_info === '编辑') {
          this.form = val
          this.form.cmd_type = String(this.form.cmd_type)
          this.old_name = val.name
          this.old_desc = val.desc
        }
      },
      immediate: true
    }
  },
  mounted () {
    let formData = {}
    this.$nextTick(() => {
      const data = ['ipv6Address', 'prefixLen', 'ipv6nexthop']
      const selectData = ['ipv6interface']
      selectClass(this.$refs, selectData)
      inputClass(this.$refs, data)
    })
    getPhysicalApiArray(formData).then((response) => {
      if (response.status === 0) {
        response.info.forEach((item) => {
          this.options.push({ 'lable': item.strPhysicsName, 'value': item.strPhysicsName, 'enPortMode': item.enPortMode })
        })
      } else if (response.status === -1) {
        this.$messages.error(response.msg)
        this.$router.push('/login')
      }
    })
  },
  methods: {
    // 发送form表单数据到父组件
    send_form () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$emit('childForm', this.form)
        } else {
          return false
        }
      })
    },
    isValidIP (ip) {
      let reg = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      return reg.test(ip)
    },
    isValidMask (mask) {
      let reg = /^(254|252|248|240|224|192|128|0)\.0\.0\.0|255\.(254|252|248|240|224|192|128|0)\.0\.0|255\.255\.(254|252|248|240|224|192|128|0)\.0|255\.255\.255\.(255|254|252|248|240|224|192|128|0)$/
      return reg.test(mask)
    },
    isValidIPv6 (ip) {
      // let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}(([0-9A-Fa-f]{1,4})|:))|(([0-9A-Fa-f]{1,4}:){6}(:|((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})|(:[0-9A-Fa-f]{1,4})))|(([0-9A-Fa-f]{1,4}:){5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){4}(:[0-9A-Fa-f]{1,4}){0,1}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){3}(:[0-9A-Fa-f]{1,4}){0,2}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:){2}(:[0-9A-Fa-f]{1,4}){0,3}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(([0-9A-Fa-f]{1,4}:)(:[0-9A-Fa-f]{1,4}){0,4}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(:(:[0-9A-Fa-f]{1,4}){0,5}((:((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})?)|((:[0-9A-Fa-f]{1,4}){1,2})))|(((25[0-5]|2[0-4]\d|[01]?\d{1,2})(\.(25[0-5]|2[0-4]\d|[01]?\d{1,2})){3})))(%.+)?\s*$/
      let reg = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      return reg.test(ip)
    },
    updateView (e) {
      this.$forceUpdate()
    },
    add_addr () {
      this.dialogAddrFormVisible = true
    },
    backParent () {
      this.$emit('quxiao', false)
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    close () {
      this.form = {
        'ipv6-address': '',
        'prefix-len': '',
        interface: '',
        nexthop: ''
      }
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped>
.tools_box {
  text-align: left;
}

.circle {
  padding: 5px;
}
</style>
